<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Some tricks to get content with Hatforrent</title>
<style>
	a {
		color: #FFEBA3;
	}
	pre {
		background: none repeat scroll 0 0 #FFEBA3;
		border-radius: 3px;
		padding: 10px;
	}
	span.usage {
		font-style: italic;
		background: #c8c8c8;
		padding: 2px 5px;
		border-radius: 5px;
		margin: 0 5px;
	}
	.title {
		color: #FF005C;
	}
	.output {
		background: #000;
		color: #fff;
		padding: 10px;
		border-radius: 5px;
	}
	h1 {
		text-align: center;
	}
</style>
</head>

<body>
	<h1>Some tricks to get content with Hatforrent</h1>
    <p>Example :</p>
    <pre>
&lt;h1 id="title"&gt;
	
    &lt;a href="/path/to/link-1"&gt; link 1 &lt;/a&gt;
    
    &lt;a href="/path/to/link-2"&gt; link 2 &lt;/a&gt;
    
    &lt;a href="/path/to/link-3"&gt; link 3 &lt;/a&gt;
    
&lt;/h1&gt;
&lt;div id="content"&gt;

    &lt;div class="div-1"&gt; This is the div 1 &lt;/div&gt;
    
    &lt;div class="div-2"&gt; This is the div 2 &lt;/div&gt;
    
    &lt;div class="div-3"&gt; &lt;span&gt; This is the div 3 &lt;/span&gt; &lt;/div&gt;
    
    &lt;div class="div-4"&gt; This is the div 4 &lt;/div&gt;
    
    &lt;div class="div-5"&gt; This is the &lt;a href="/hatforrent/faq" rel="nofollow"&gt; div 5 &lt;/a&gt; &lt;/div&gt;
    
    &lt;div class="div-6"&gt; This is the div 6 &lt;/div&gt;
    
    &lt;div class="div-7"&gt; This is the &lt;a href="http://yahoo.com/" rel="follow"&gt; div 7 &lt;/a&gt; &lt;/div&gt;
    
    &lt;div class="div-8"&gt; This is the &lt;a href="http://google.com/" rel="follow"&gt; div 8 &lt;/a&gt; &lt;/div&gt;
    
    &lt;div class="div-9"&gt; This is the &lt;a href="/hatforrent/get-auto-content" rel="nofollow"&gt; div 9 &lt;/a&gt; &lt;/div&gt;
    
    &lt;img src="/img/sample-image-1.png" alt="images" title="sample image" /&gt;
    
    &lt;img src="/img/sample-image-2.jpg" alt="images" title="sample image" /&gt;
    
    &lt;img src="/img/sample-image-3.png" alt="images" title="sample image" /&gt;
    
&lt;/div&gt;
    </pre>
    <hr />
    <div>
        <h4 class="title">elements with attribute ID of "id"</h4>
        <p><span class="usage">Usage : </span> <strong>#id</strong></p>
        Example : <strong>div#content</strong>
        <p>
        	Output :
            <div class="output">
                <div>This is the div 1</div>
    
                <div>This is the div 2</div>
                
                <div><span>This is the div 3</span></div>
                
                <div>This is the div 4</div>
                
                <div>This is the <a href="/hatforrent/faq" rel="nofollow"> div 5</a></div>
               
                <div>This is the div 6 </div>
                
                <div>This is the <a href="http://yahoo.com/" rel="follow"> div 7 </a></div>
                
                <div>This is the <a href="http://google.com/" rel="follow"> div 8 </a></div>
                
                <div>This is the <a href="/hatforrent/get-auto-content" rel="nofollow"> div 9 </a></div>
            </div>
        </p>  
    </div>
    <hr />
    <div>
        <h4 class="title">elements with a class name of "class"</h4>
        <p><span class="usage">Usage : </span> <strong>.class</strong></p>
        Example : <strong>div.div-1</strong>
        <p>
        	Output :
            <div class="output">
                This is the div 1
            </div>
        </p>  
    </div>
    <hr />        
    <div>
        <h4 class="title">Find unique elements that match any of the selectors</h4>
        <p><span class="usage">Usage : </span> <strong>el, el, el</strong></p>
        <p>Example : <strong>div.div-1, div.div-2</strong></p>
        <p>
        	Output :
            <div class="output">
                This is the div 1
                <br />
                This is the div 2
            </div>
        </p>   
    </div>
    <hr />
    <div>
        <h4 class="title">Get the first and last element</h4>
        <p><span class="usage">Usage : </span> <strong>tag|first, tag|last</strong></p>
        <p>Example : <strong>div|first, div|last</strong></p>
        <p>
        	Output :
            <div class="output">
                This is the div 1
                <br />
                This is the div 9
            </div>
        </p>   
    </div>
    <hr />
    <div>
        <h4 class="title">Get the title link (for the special case)</h4>
        <p>In some special case, there are many links in the title. You can see the example in the code above, there are 3 links in the h1 tag, and we must choose one of them.</p>
        <p><span class="usage">Usage : </span> <strong>a|x-1</strong></p>
        <p>"x" is the position of tag a</p>
        Example : 
        <p>"link 1" : position 1 => <strong>a|0</strong></p>
        <p>"link 2" : position 2 => <strong>a|1</strong></p>
        <p>"link 3" : position 3 => <strong>a|2</strong></p>        
    </div>
    <hr />
    <div>
    	<h4 class="title">Elements whose sibling index is equal to n</h4>
        <p><span class="usage">Usage : </span> <strong>:eq(n)</strong></p>
        <p>Example : <strong>#content div:eq(2), #content div:eq(5)</strong></p>
        <p>
        	Output :
            <div class="output">
                This is the div 3
                <br />
                This is the div 6
            </div>
        </p>
    </div>
    <hr />
    <div>
        <h4 class="title">Find elements that contain elements matching the selector</h4>
        <p><span class="usage">Usage : </span> <strong>:has(seletor)</strong></p>
        Example : <strong>div:has(span)</strong>
        <p>
        	Output :
            <div class="output">
                This is the div 3
            </div>
        </p>  
    </div>
    <hr />
    <div>
        <h4 class="title">find elements that contain the given text. The search is case-insensitive;</h4>
        <p><span class="usage">Usage : </span> <strong>:contains(text)</strong></p>
        Example : <strong>div:contains(div 4)</strong>
        <p>
        	Output :
            <div class="output">
                This is the div 4
            </div>
        </p>  
    </div>
    <hr />
    <div>
        <h4 class="title">elements with an attribute named "attr", and value equal to "val"</h4>
        <p><span class="usage">Usage : </span> <strong>img[width=500], a[rel=nofollow]</strong></p>
        Example : <strong>a[rel=nofollow]</strong>
        <p>
        	Output :
            <div class="output">
                div 5
            </div>
        </p>  
    </div>
    <hr />
    <div>
        <h4 class="title">elements with an attribute named "attr", and value starting with "valPrefix"</h4>
        <p><span class="usage">Usage : </span> <strong>[attr^=valPrefix]</strong></p>
        Example : <strong>a[href^=http:]</strong>
        <p>
        	Output :
            <div class="output">
                div 7
                <br />
                div 8
            </div>
        </p>  
    </div>
    <hr />
    <div>
        <h4 class="title">elements with an attribute named "attr", and value containing "valContaining"</h4>
        <p><span class="usage">Usage : </span> <strong>[attr*=valContaining]</strong></p>
        Example : <strong>a[href*=/hatforrent/]</strong>
        <p>
        	Output :
            <div class="output">
                div 5
                <br />
                div 9
            </div>
        </p>  
    </div>
    <hr />
    <div>
        <h4 class="title">elements with an attribute named "attr", and value ending with "valSuffix"</h4>
        <p><span class="usage">Usage : </span> <strong>[attr$=valSuffix]</strong></p>
        Example : <strong>img[src$=.png]</strong>
        <p>
        	Output :
            <div class="output">
                &lt;img src="/img/sample-image-1.png" alt="images" title="sample image" /&gt;
                <br />
                &lt;img src="/img/sample-image-3.png" alt="images" title="sample image" /&gt;
            </div>
        </p>  
    </div>
    <hr />
</body>
</html>